<%--
  Created by IntelliJ IDEA.
  User: 兰宦君
  Date: 2015/10/3
  Time: 14:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
  <title>BookStore——我的网上书店</title>
  <%@ include file="../layout/import.jsp"%>
    <script type="text/javascript" >

        function totalPrice() {
            var total_price = 0.0;
            for(var i = 0; i < ${bookList.size()}; i++) {
                var num_id = "#num" + i;
                var price_id = "#price" + i;
                var price = parseFloat($(price_id)[0].innerHTML);
                var num = parseInt($(num_id)[0].value);
                total_price = total_price + num * price;
            }
            $("#total-price")[0].innerHTML = total_price.toFixed(2);
        }

        function add(id, bookid){
            var num = $(id)[0].value;
            $(id)[0].value = parseInt(num) + 1;
            changeNum(bookid, parseInt(num) + 1);
            totalPrice();
        }
        function sub(id, bookid){
            var num = parseInt($(id)[0].value);
            if (num > 1) {
                $(id)[0].value = num - 1;
            }
            changeNum(bookid, num - 1);
            totalPrice();
        }

        function changeNum(id, num) {
            $.ajax({
                url: "/changeNumber.do",
                data: {id:id, num: num},
                method: "POST",
                dataType: "json",
                error: function () {
                    alert("表单提交出错，请稍后再试");
                },
                success: function(response) {
                    if(response.code == 0) {

                    }
                    else {
                        alert(response.description);
                    }
                }
            });
        }
    </script>
</head>
<body>
<%@include file="nav.jsp"%>
<div class="container" style="min-height: 80%">
  <c:if test="${isLogin eq false}">
    <p class="text-center">您还没有登录，请你先<a class="text-center text-success" href="/login.do"><span class="text-danger">登录</span></a></p>
  </c:if>
  <c:if test="${isLogin eq true}">
    <div >
      <form class="form">
      <table class="table">
        <thead>
        <tr>
          <th>编号</th><th>图书名称</th><th>单价</th><th style="width: 10%">数量</th><th>操作</th>
        </tr>
        </thead>
        <tbody>


          <c:forEach var="book" items="${bookList}" varStatus="status">
            <tr>
            <div class="form-group">
            <td>
              ${status.index + 1}
              <input type="hidden" name="id" id="id${status.index}" class="form-control" disabled="disabled" value="${book.bookId}">
            </td>
            <td>
              ${book.name}
            </td>
            <td>
              <span id="price${status.index}">${book.price}</span>
            </td>
            <td style="width: 20%">
               <div class="input-group" style="width: 55%" >
                   <span class="input-group-btn">
                       <button class="btn btn-default" type="button" onclick="sub('#num${status.index}', ${book.bookId})">-</button>
                   </span>
                   <input type="number" class="form-control" id="num${status.index}" name="num" disabled="disabled" value="${book.num}">
                   <span class="input-group-btn">
                       <button class="btn btn-default" type="button" onclick="add('#num${status.index}', ${book.bookId})">+</button>
                   </span>

               </div>
            </td>
            <td>
                <a href="/delFromCart.do?bookid=${book.bookId}">删除</a>
            </td>
          </div>
        </tr>
          </c:forEach>

        </tbody>

      </table>
      </form>

    </div>

    <div class="col-sm-12">
        <p class="text-right" style="font-size: 25">总价：￥<span id="total-price"></span></p>
        <script type="text/javascript">
            totalPrice();
        </script>
    </div>

    <div class="col-sm-offset-8 col-sm-4 btn-group">
       <a class="btn btn-info" href="/index.do">继续购买</a>
       <a class="btn btn-info" href="/buy.do" >立即结算</a>
    </div>

  </c:if>
</div>
<%@include file="footer.jsp"%>
</body>
</html>
